<template>
    <div class="input_group">
        <label :for="name">{{label}}</label>
        <!-- @input="$emit('input',$event.target.value)" 把当前的input 传入父组件  -->
        <input 
            :type="type" 
            :value="value" 
            :placeholder="placeholder" 
            :name="name" 
            @input="$emit('input',$event.target.value)"
            autocomplete
        />
    </div>
</template>
<script>
export default {
    name:'input_group',
    props:{
        type:{//要求传过来的是字符串;如果没传默认为text类型
            type:String,
            default:'text'
        },
        value:String,
        placeholder:String,
        name:String,
        label:String,
    },
    data(){
        return{

        }
    }
}
</script>
<style scoped>
.input_group{
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #d9d9d9;
    padding: 10px 0;
    line-height: 60px;
}
.input_group label{
    display: inline-block;
    width: 30%;
    font-size: 16px;
}
.input_group input{
    display: inline-block;
    width: 65%;
    font-size: 16px;
    border: none;
    outline: none;
}
</style>


